<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstname" @keyup="getFullname"/>+
			<input type="text" v-model="lastname"  @keyup="getFullname" />=
			<input type="text" v-model="endname" />
		</div>
		<script type="text/javascript">
			vm=new Vue({
				el:'#app',
				data:{
					firstname:'',
					lastname:'',
				},
				methods:{
					getFullname(){
						this.endname=this.firstname+'+'+this.lastname
					}
				},
    //  watch监听于methods同级
   watch:{
   	'firstname':function(ovel){
   		this.endname=ovel+'+'+this.lastname
   	},
   	'lastname':function(ove){
   	this.endname=this.firstname+'+'+ove
   	},
   	
   },
//computed计算属性的使用,其实就是一个方法
//  computed: {
//           'endname': function(){
//               return this.firstname + '-' + this.lastname
//           }
//       }
// 			})
		</script>
	</body>
</html>
